<template>
    <div class="register">
        <div class="register-container">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model.number="ruleForm.name" />
                </el-form-item>
                <el-form-item label="密码：" prop="pass">
                    <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="确认密码：" prop="checkPass">
                    <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号码：" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber" />
                </el-form-item>
                <el-form-item label="邮箱：" prop="mailBox">
                    <el-input v-model="ruleForm.mailBox" />
                </el-form-item>
                <el-form-item label="性别：" prop="gender">
                    <el-select v-model="ruleForm.gender" placeholder="">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="register-button" @click="submitForm(ruleFormRef)">
                        立即注册
                    </el-button>
                </el-form-item>
            </el-form>
            <el-text class="mx-1 login-link" @click="registerHandle">已有账号？立即登录</el-text>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { UserRegister } from '@/request/api';

const ruleFormRef = ref<FormInstance>()
const router = useRouter();
const checkPhone = (rule: any, value: any, callback: any) => {
    const reg = /^1[3456789]\d{9}$/;
    if (reg.test(value)) {
        callback();
    } else {
        return callback(new Error("请输入正确的手机号"));
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the password'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请在次输入密码'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("输入的两次密码不一致"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
    phoneNumber: '',
    name: "",
    mailBox: "",
    gender: "",
})

const rules = reactive<FormRules<typeof ruleForm>>({
    name: [{
        required: true,
        message: '用户名不能为空',
        trigger: 'blur',
    }],
    pass: [{
        required: true,
        message: '密码不能为空',
        trigger: 'blur',
    }, { validator: validatePass, trigger: 'blur' }],
    checkPass: [{
        required: true,
        message: '确认密码不能为空',
        trigger: 'blur',
    }, { validator: validatePass2, trigger: 'blur' }],
    phoneNumber: [{
        required: true,
        message: '手机号码不能为空',
        trigger: 'blur',
    }, { validator: checkPhone, trigger: 'blur' }],
    mailBox: [{
        required: true,
        message: '邮箱不能为空',
        trigger: 'blur',
    }, { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
    gender: [{
        required: true,
        message: '请选择性别',
        trigger: 'blur',
    }],

})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            UserRegister(JSON.stringify({
                "username": ruleForm.name,
                "password": ruleForm.pass,
                "phoneNumber": ruleForm.phoneNumber,
                "email": ruleForm.mailBox,
                gender: ruleForm.gender
            })).then((res) => {
                ElMessage.success('注册成功');
                Object.assign(ruleForm, {
                    pass: '',
                    checkPass: "",
                    phoneNumber: '',
                    name: "",
                    mailBox: "",
                })
                formEl.resetFields()
            }, (erro) => {
                console.log(erro, "erro")
                ElMessage.error(erro.message);
            })
        } else {
            console.log('error submit!')
        }
    })
}
function registerHandle() {
    router.push({ path: "/Login" })
}
</script>
<style scoped>
.register {
    margin: 0 auto;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background:url(@/assets/login.jpeg) no-repeat;
    background-size: cover; */
}

.register-container {
    position: relative;
    width: 500px;
    height: 350px;
    background-color: #f2f2f2;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.register-button {
    width: 100%;
}

.login-link {
    /* 使用绝对定位 */
    position: absolute;
    /* 定位到容器底部 */
    bottom: 5px;
    /* 定位到容器右侧 */
    right: 10px;
    text-decoration: underline;
    cursor: pointer;
}
</style>